<template>
  <div class="customer-management">
    <!-- 顶部操作栏 -->
    <el-row class="toolbar" justify="space-between">
      <el-col :span="14">
        <el-select v-model="page.searchKey" style="width: 100px">
          <el-option label="手机号" value="手机号" />
          <el-option label="微信昵称" value="微信昵称" />
          <el-option label="姓名" value="姓名" />
          <el-option label="会员卡号" value="会员卡号" />
        </el-select>
        <el-input v-model="searchKey" placeholder="请输入关键词" clearable style="width: 200px" @change="Getlist">
          <template #prefix>
            <el-icon>
              <search />
            </el-icon>
          </template>
        </el-input>
        <el-select v-model="page.CustomerSex" placeholder="请输入性别" style="width: 150px">
          <el-option label="男" :value="true" />
          <el-option label="女" :value="false" />

        </el-select>
        <!-- <el-select v-model="page.statushierarchy" placeholder="请输入标签" style="width: 150px">
          <el-option label="手机号" value="手机号" />
          <el-option label="微信昵称" value="微信昵称" />
          <el-option label="姓名" value="姓名" />
          <el-option label="会员卡号" value="会员卡号" />
        </el-select> -->

      </el-col>

      <el-col :span="14" class="text-right">
        <el-button type="primary" @click="exportData">
          <el-icon>
            <download />
          </el-icon>
          导出会员数据
        </el-button>
        <el-button type="success" @click="openTagDialog">
          <el-icon><price-tag /></el-icon>
          打标签
        </el-button>
        <el-button @click="openLevelDialog">
          <el-icon>
            <trophy />
          </el-icon>
          修改等级
        </el-button>
      </el-col>
    </el-row>

    <!-- 客户数据表格 -->
    <el-table :data="customerList" stripe style="width: 100%">
      <el-table-column prop="nickCustomerName" label="客户信息" width="220">
        <template #default="{ row }">
          <div class="user-info">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />

            <div class="user-details">
              <p class="customerName">昵称:{{ row.customerName }}</p>
              <p class="cientName">姓名:{{ row.nickCustomerName || '--' }}</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="statushierarchy" label="身份等级" width="120">
        <template #default="{ row }">
          <div class="user-details">
            <p class="statushierarchy">{{ row.statushierarchy }}</p>
            <el-tag class="status" v-show="row.status == true">{{ row.status == true ? '冻结' : '解冻' }}</el-tag>
          </div>

        </template>
      </el-table-column>
      <el-table-column prop="tags" label="标签">
      </el-table-column>
      <el-table-column prop="cardNumber" label="卡号" width="150" />
      <el-table-column prop="customerPhone" label="手机" width="130" />
      <el-table-column label="账户信息">
        <el-table-column prop="availablebalance" label="可用余额" width="120">
          <template #default="{ row }">￥{{ row.availablebalance }}</template>
        </el-table-column>
        <el-table-column prop="availablepoints" label="可用积分" width="100" />
      </el-table-column>
      <el-table-column label="消费记录">
        <el-table-column prop="totalspent" label="累计消费" width="120">
          <template #default="{ row }">￥{{ row.totalspent }}</template>
        </el-table-column>
        <el-table-column prop="refundamount" label="累计退款" width="120">
          <template #default="{ row }">￥{{ row.refundamount }}</template>
        </el-table-column>
        <el-table-column prop="ordercount" label="消费次数" width="100" />
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="{ row }">
          <el-button size="small" @click="jumpto">
            <el-icon>
              <view />
            </el-icon>
            详情
          </el-button>
          <el-button size="small" :type="row.status ? 'danger' : 'success'" @click="toggleStatus(row)">
            {{ row.status == false ? '冻结' : '解冻' }}
          </el-button>
          <el-dropdown>
            <el-button type="primary" size="small">
              更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="sendCoupon(row)">送优惠券</el-dropdown-item>
                <el-dropdown-item @click="recharge(row)">充值</el-dropdown-item>
                <el-dropdown-item @click="consume(row)">消费</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination v-model:current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next"
        :total="page.TotalCount" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getCientList, UpdateCientStates,ExportCientListExcel } from '@/api/index'
import {
  Search, Download, PriceTag, Trophy, View, ArrowDown
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import router from '@/router'

const page = reactive({
  searchKey: '',
  CustomerSex: '',
  states:0,
  Index: 1,
  Size: 10,
  TotalCount: 1,
  TotalPage: 1
})
// 模拟数据
const customerList = ref([])
const Getlist = () => {
  getCientList(page).then(res => {
    customerList.value = res.data.list
    page.TotalCount = res.data.totalCount
  })
}
onMounted(() => {
  Getlist()
})

// 操作功能
const toggleStatus = (row) => {
if(row.states==true){
  page.states=1
}
else{
  page.states=0
}
  UpdateCientStates(row.id, page.states).then(res => {
    if (res.data.code == 200) {
      Getlist()
    }
  })
  row.status = row.status ? 0 : 1
}

const showDetail = (row) => {
  console.log('查看详情:', row)
}
//导出
const exportData = () => {
  axios({
    url: 'https://localhost:44388/api/app/cient/export-excel',
    method: 'POST',
    responseType: 'blob' // 重要
  }).then(res => {
    const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = `客户数据_${new Date().toLocaleDateString()}.xlsx`
    link.click()
    URL.revokeObjectURL(link.href)
    ElMessage.success("导出成功")
  }).catch(() => {
    ElMessage.error("导出失败")
  })
}
const jumpto=()=>{
  router.push({
    name:'CustormsQuery'
  })
}
// 其他方法类似..买.
</script>

<style scoped>
.customer-management {
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-details {
  margin-left: 10px;
}

.user-details .name {
  font-weight: 500;
  margin-bottom: 2px;
}

.user-details .nickname {
  color: #999;
  font-size: 12px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.mx-1 {
  margin: 0 4px;
}
</style>